
<template>
  <div>
    <el-button @click="add">+</el-button>
    <div v-for="(item, index) in data" :key="index">
      <div style="display: flex;">
        <el-input v-model="item.dict" />
        <el-button @click="addTable(index)">增加</el-button>
      </div>
      <el-table
        :data="item.tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="属性"
          width="180">
          <template slot-scope="scope">
            <div>
              <el-input v-model="scope.row.name"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="值"
          width="180">
          <template slot-scope="scope">
            <div>
              <el-input v-model="scope.row.value"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column
        label="操作"
        width="100">
        <template>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <el-button @click="submit">提交</el-button>
  </div>
</template>

<script> 
  export default {
    data() {
      return {
        data: []
      };
    },
    created() {
        let data = {
          "test01": {
            "aa": 1,
            "bb": 2
          },
          "test02": {
            "cc": 1
          }
        }
        for(let key in data) {
          this.data.push({
            dict: key,
            tableData: Object.entries(data[key])
          })
        }
        for(let i = 0; i < this.data.length; i++) {
          let tableData = [];
          for(let j = 0; j < this.data[i]["tableData"].length; j++) {
            tableData.push({
              name: this.data[i]["tableData"][j][0],
              value: this.data[i]["tableData"][j][1]
            })
          }
          this.data[i]["tableData"] = tableData
        }
        console.log(this.data)
      },
    methods: {
      add() {
        this.data.push(
          {
            dict: '',
            tableData: []
          }
        )
      },
      addTable(index) {
        this.data[index]['tableData'].push({
          name:'',
          value: ''
        })
      },
      
      submit() {
        let data = {};
        for(let i = 0; i < this.data.length; i++) {
          data[this.data[i]["dict"]] = {} 
          for(let j = 0; j < this.data[i]["tableData"].length; j++) {
            console.log(data)
            data[this.data[i]["dict"]][this.data[i]["tableData"][j]["name"]] = this.data[i]["tableData"][j]["value"]
          }
        }
        console.log(data, '+++++++++++++++')
      }
    }
  };
</script>